<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
</head>


<body>
    <!-- 给一个容器 -->
    <div class="container">
        <div class="row text-center">
            <h1>学生信息管理系统</h1>
            <hr>

            <a href="" class="btn btn-success">首页</a>
            <a href="./add.html" class="btn btn-warning">添加</a>

            <br>
            <br>
        </div>


        <div class="row">

            <table  id="tb" class="table table-bordered table-condensed table-hover table-responsive text-center">
                <!-- <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr> -->

                <!-- 将result的数据遍历出来 -->


                <!-- <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>
                        <a  class="btn btn-danger" cid="">删除</a>
                        <a class="btn btn-warning">修改</a>

                    </td>



                </tr> -->

            </table>

        </div>
    </div>

</body>

</html>
<script src="./static/js/jquery.min.js"></script>
<script>
$.ajax({
    url:"/index",//请求接口地址
    type:"get",//请求接口方式，get方式/post方式
    data:{
    },
    success:function(res){
        let tb=$("#tb")
        let str_tb=""
         str_tb+=` <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
`;
        res.data.forEach(item => {
            str_tb+=`<tr>
                    <td>${item.id}</td>
                    <td>${item.姓名}</td>
                    <td>${item.年龄}</td>
                    <td>${item.性别}</td>
                    <td>
                        <a  class="btn btn-danger" cid="${item.id}">删除</a>
                        <a  class="btn btn-warning" cid="${item.id}">修改</a>

                    </td>
                </tr>`
        });
        tb.html(str_tb)
    },
    //回调函数，里面err接收后端返回的错误信息
    error:function(err)
    {
        console.log(res);
    }
})


// 删除功能
 $("#tb").on("click",".btn-danger",function(){
    let id=$(this).attr("cid")
    // 通过ajax传给后台
    $.ajax({
    url:"/del",//请求接口地址
    type:"get",//请求接口方式，get方式/post方式
    data:{
        id:id
    },
    success:function(res){
        
    },
    //回调函数，里面err接收后端返回的错误信息
    error:function(err)
    {
        
    }
    })
 })

// 
$("#tb").on("click",".btn-warning",function(){
    location.href="./edit.html"
    let id=$(this).attr("cid")
    console.log(id);
    // 通过ajax传给后台
    $.ajax({
    url:"/xiugai",//请求接口地址
    type:"get",//请求接口方式，get方式/post方式
    data:{
        id:id
    },
    success:function(res){
        
    },
    //回调函数，里面err接收后端返回的错误信息
    error:function(err)
    {
        
    }
    })
 })

</script>